<template>
	<view class="content">
		<view class="wrap">
			<view class="wrap-luckDraw">
				<view class="box">
					<view class="item" v-for="(item, index) in data" :key="item.id">
						<view
							class="box_item"
							:class="item.id === flag ? 'active' : ''"
							v-if="index === 4"
							:style="{ background: 'url(' + startBtn + ')', backgroundSize: '100% 100%', fontSize: '28rpx', alignItems: 'center' }"
							@click="item.id == 0 ? start() : ''"
						>
							{{ item.name }}
						</view>
						<view class="box_item" :class="item.id === flag ? 'active' : ''" v-else @click="item.id == 0 ? start() : ''">
							<image class="prizeIcon" :src="item.img"></image>
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { Luckdraw } from './utils/index.js';
export default {
	props: {
		prizeList: {
			type: Array,
			default() {
				return '';
			}
		},
		
	},
	data() {
		return {
			startBtn: require('@/common/images/lottery/btn.png'),
			data: [
				{
					id: 1,
					name: '',
					img: ''
				},
				{
					id: 2,
					name: ''
				},
				{
					id: 3,
					name: '',
					img: ''
				},
				{
					id: 8,
					name: '',
					img: ''
				},
				{
					id: 4,
					name: '',
					img: ''
				},

				{
					id: 7,
					name: '',
					img: ''
				},

				{
					id: 6,
					name: '',
					img: ''
				},

				{
					id: 5,
					name: '',
					img: ''
				}
			],
			flag: '', //中奖的编号
			time: 0, //旋转的值
			// isStart: false, //是否开始
			ratio: [],
			prizeStatus: 0 //是否得奖
		};
	},
	created() {
		this.data.splice(4, 0, {
			id: 0,
			name: ''
		});
		let arr = this.prizeList;
		arr.forEach((item, index) => {
			this.data.forEach(item1 => {
				if (item1.id === item.sort) {
					item1.img = item.img;
					item1.name = item.name;
					return;
				}
			});
		});
		var ratioArr = [];
		arr.forEach((item, index) => {
			ratioArr.push(item.ratio);
		});
		this.ratio = ratioArr;
	},
	methods: {
		start() {
			this.$emit('start');
		},
		// 开始播放
		play() {
			let ratio = this.ratio;
			// 中奖概率构造函数
			let ld = new Luckdraw();
			let flagNew = ld.random(ratio); //生成随机数
			// console.log(flagNew)
			var flag = 0;
			for (var i = 0; i < this.prizeList.length; i++) {
				if (flagNew == this.prizeList[i].ratio) {
					flag = this.prizeList[i].sort;
				} else {
					continue;
				}
			}
			// console.log(flag)
			this.time = 6100 + 50 * flag;
		},
		// 传入停止位置,并启动转盘,传入负数,为未中奖
		stop(index) {
			this.flag = index;
			this.fn(100);
		},
		// 
		fn() {
			let time = this.time;
			let n = 50;
			let Timeout = () => {
				setTimeout(() => {
					time = time - n;
					if (time <= 5000 && time > 4000) {
						n = 90;
					}
					if (time <= 4000 && time > 3000) {
						n = 100;
					} else if (time <= 3000 && time > 2500) {
						n = 500;
					} else if (time <= 2500 && time > 2000) {
						n = 800;
					} else if (time <= 2000) {
						n = 1000;
					}
					if (time <= 0) {
						if (this.flag>=0) {
							let item ;
							let flag = this.flag;
							let prizeList = this.prizeList;
							for (var i = 0; i < prizeList.length; i++) {
								if (flag == prizeList[i].sort) {
									item = prizeList[i];
									break;
								}
							}
							this.$emit('end',item)
							// uni.showToast({
							// 	title: `恭喜您获得${title}`,
							// 	icon: 'none',
							// 	duration: 3500
							// });
						} else { //
							uni.showToast({
								title: '很遗憾没有中奖',
								icon: 'none',
								duration: 2000
							});
						}
						// this.isStart = false;
						return false;
					}
					if (this.flag < 8) {
						this.flag++;
					} else {
						this.flag = 1;
					}
					Timeout();
				}, n);
			};
			Timeout();
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	// height: 100%;
	margin: 0 20px;
	padding: 0px;

	.wrap {
		background: url(https://app.yqs.ysumpay.com/userAppImg/217/2022/04/15/4f7ae8d4-877e-49c5-b5ff-64ad1fd889f5.png);
		background-size: 100% 100%;
		padding: R(40);
		.top-column {
			width: 100%;
			height: 0;
			padding-bottom: 35%;

			.nav {
				width: 100%;
				height: 10rpx;
				display: block;
			}

			.title {
				width: 410rpx;
				height: 57rpx;
				margin: auto;
				margin-top: 10%;
				background: #ffaf46;
				box-shadow: 0px 3px 2px 0px rgba(172, 48, 3, 0.44);
				border-radius: 29rpx;
				text-align: center;
				line-height: 57rpx;
				color: #d33400;
			}
		}
		.wrap-luckDraw {
			width: auto;
			// height: 580rpx;

			.box {
				width: 580rpx;
				height: 560rpx;
				display: flex;
				margin: auto;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: center;

				.box_item {
					width: 172rpx;
					height: 172rpx;
					background: url('../..//common/images/lottery/icon4.png');
					background-size: 100% 100%;
					display: flex;
					padding-bottom: 2rpx;
					color: #ff5118;
					//align-items: center;
					justify-content: center;
					border-radius: 10rpx;
					flex-wrap: wrap;
					font-size: 24rpx;
					text-align: center;

					.prizeIcon {
						width: 108rpx;
						height: 90rpx;
						margin: auto;
					}

					&:nth-child(5) {
						color: #fff;
					}
				}

				.active {
					background: url('../..//common/images/lottery/icon5.png');
					background-size: 100% 100%;
				}
			}
		}

		.luckdraw-num {
			width: 459rpx;
			height: 72rpx;
			margin: 20rpx auto;
			background: #fa3e3f;
			border-radius: 10rpx;
			line-height: 72rpx;
			text-align: center;
			color: #fff;
		}
	}
}
</style>
